<template>
  <a-modal title="批量分配角色" :width="800" :height ="400" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"
    @cancel="handleCancel" cancelText="关闭" wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 100%;overflow-y: hidden">

    <a-spin :spinning="confirmLoading" style="margin-top: 30px;">
      <a-form-model-item label="选中用户" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled">
        <!-- <a-input v-model="item.realname" v-for="item in model" :key="item.id">
            
          </a-input> -->
        <j-multi-select-tag :disabled="false" v-model="model.selectedusers" :options="model.userOptions"
          placeholder="选中用户">
        </j-multi-select-tag>
      </a-form-model-item>
      <a-form-model ref="form" :model="model">
        <a-form-model-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled">
          <j-dict-select-tag v-model="model.selectedroles" placeholder="请选择角色" :options="rolesOptions" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>


export default {
  name: "",

  data() {
    return {
      confirmLoading: false,
      description: '角色组管理页面',
      title: "",
      visible: false,
      roleDisabled: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      rolesOptions: [
        {
          "label": "第三方登录角色",
          "value": "1169504891467464705"
        },
        {
          "label": "财务出纳",
          "value": "1260924539346472962"
        },
        {
          "label": "人力资源部",
          "value": "e51758fa916c881624b046d26bd09230"
        },
        {
          "label": "临时角色",
          "value": "ee8626f80f7c2619917b6236f3a7f02b"
        },
        {
          "label": "管理员",
          "value": "f6817f48af4fb3af11b9e8bf182f618b"
        }
      ],


      dictOptions: {},
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  methods: {
    add() {
      this.edit(this.modelDefault);
    },
    edit(record) {
      this.model = {}
      this.model.users = record;

      let userOptions = []
      let selectedusers =[]
      for (let index = 0; index < record.length; index++) {
        const user = record[index];

        userOptions.push({
          "label": user.realname,
          "value": user.id
        })
        selectedusers.push(user.id)
      }
      // record.forEach(user => {
      
      // });
      this.model.selectedusers = selectedusers.join(",");
      this.model.userOptions = userOptions;
      console.log('this.model',this.model)
      this.visible = true
    },
    close() {
      // this.$refs.form.clearValidate();
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      this.$emit('close');
      this.visible = false;
      return


    },
    handleCancel() {
      this.close()
    },
  
  }
}
</script>

<style scoped>

</style>